<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>数据分析 | PPYY天气网</title>
    <link rel="stylesheet" href="https://npm.elemecdn.com/element-ui/lib/theme-chalk/index.css"/>
</head>
<body>
<div id="app">

    <h1 style="text-align: center; margin-top: 20px;">天气分析</h1>
    <h4 style="text-align: center; margin-top: 20px;">(( length )) 个省级行政区</h4>

    <el-row style="position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); ">
        <el-col :span="24">
            <el-cascader
                    placeholder="选择省份"
                    v-model="value"
                    :options="options">
            </el-cascader>
        </el-col>
    </el-row>

    <el-row style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); ">

        <el-col :span="24">
            <el-button type="primary" @click="openNewWindow()" style="margin-left: 5px;">数据分析</el-button>
        </el-col>

    </el-row>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://npm.elemecdn.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://npm.elemecdn.com/element-ui/lib/index.js"></script>
<!-- import Axios -->
<script src="https://npm.elemecdn.com/axios/dist/axios.min.js"></script>
<script>
    // Vue.use(ElementUI)
    new Vue({
        el: '#app',
        methods: {

            openNewWindow() {
                window.open('/analyse/province/' + this.value, '_blank')
            }

        },
        data: {
            value: '',
            options: [

              (% for province in provinceList %)
                {
                  value: '(( province.id ))',
                  label: '(( province.name ))',
                },
                (% endfor %)

            ],
        }
    })
</script>
</html>